<template>
    <dv-border-box1>
        <div class="title">商户综合排名</div>
        <div @click="hosipital.visible = true" style="
        margin: 0 20px 10px;
        width: 60px;
        margin-left: auto;
        padding: 1px 4px;
        background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 280%);
        border: 1px solid #1f99c7;
        border-radius: 10px;
        color: #1f99c7;
        cursor: pointer;
      ">
            导出
            <el-icon>
                <Download />
            </el-icon>
        </div>
        <div style="overflow: auto; padding: 0 20px; height: calc(100% - 70px)" class="testbox">
            <div v-for="(item, index) in hosipital.data" key="index" style="margin-bottom: 8px; cursor: pointer"
                @click="onClickRoom(item)">
                <div style="display: flex">
                    <div style="color: #fff">No {{ index + 1 }}</div>
                    <div style="color: #fff; margin-left: 20px">{{ item.name }} - {{ item.number }}</div>
                </div>

                <el-progress :percentage="item.value" :format="(percentage) => percentage">
                    <el-text type="primary"> {{ item.value }}</el-text>
                </el-progress>
            </div>
        </div>
        <roomDia ref="roomDiaRef"></roomDia>
        <el-dialog :fullscreen="fullscreen" v-model="hosipital.visible" title="所有商户历史得分" width="1200px"
            :close-on-click-modal="false">
            <div class="avue-crud__dialog__menu">
                <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
            </div>
            <el-form :model="hosipital.search" inline size="default">
                <el-form-item label="商户名称">
                    <el-input v-model="hosipital.search.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="商户号">
                    <el-input v-model="hosipital.search.number" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="时间查询">
                    <el-date-picker v-model="hosipital.search.date" type="daterange" range-separator="至"
                        value-format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间"
                        @change="changeTime" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList" size="default">搜索</el-button>
                    <el-button type="warning" @click="reset" size="default">重置</el-button>
                    <el-button type="success" @click="onDownExcel" size="default">导出</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="hosipital.list" max-height="450">
                <el-table-column label="时间" prop="time"></el-table-column>
                <el-table-column label="商户名称" prop="name"></el-table-column>
                <el-table-column label="商户号" prop="number"></el-table-column>
                <el-table-column label="巡查任务得分" prop="task_socre"></el-table-column>
                <el-table-column label="是否上传安全承诺书" prop="safe_promise_score"></el-table-column>
                <el-table-column label="是否上传疏散路线图" prop="escape_map_score"></el-table-column>
                <el-table-column label="是否上传商户架构" prop="emergency_plan_score"></el-table-column>
                <el-table-column label="是否上传紧急预案" prop="architecture_score"></el-table-column>
                <el-table-column label="消防培训得分" prop="activity_px"></el-table-column>
                <el-table-column label="消防演练得分" prop="activity_yl"></el-table-column>
                <el-table-column label="三关一闭得分" prop="close"></el-table-column>
                <el-table-column label="动火动电得分" prop="dhdj"></el-table-column>
                <el-table-column label="烟道清洗得分" prop="flue"></el-table-column>
                <el-table-column label="学习得分" prop="study"></el-table-column>
                <el-table-column label="火灾演练得分" prop="activity_yl"></el-table-column>
                <el-table-column label="总得分" prop="score"></el-table-column>
            </el-table>
            <el-pagination style="margin-top: 10px" background v-model:current-page="hosipital.pagination.page"
                v-model:page-size="hosipital.pagination.page_size" layout="->,total, sizes, prev, pager, next, jumper"
                :total="hosipital.total" @current-change="getList" @size-change="getList" />
        </el-dialog>
    </dv-border-box1>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { pclndexRanking, pclndexRankingAll, pclndexRankingExcl } from '@/api/flueClean'
import roomDia from './components/roomDia.vue'
import { roomList } from '@/api/flueClean'
import { ElMessage } from 'element-plus'
import { Download } from '@element-plus/icons-vue'
const hosipital = reactive({
    visible: false,
    pagination: {
        page_size: 20,
        page: 1
    },
    list: [],
    total: 0,
    search: {
        date: [],
        name: '',
        number: ''
    },
    data: [
        // {
        //   name: '外科',
        //   value: 55
        // },
        // {
        //   name: '内科',
        //   value: 90
        // },
        // {
        //   name: '儿童科',
        //   value: 78
        // },
        // {
        //   name: '骨科',
        //   value: 66
        // },
        // {
        //   name: '皮肤科',
        //   value: 80
        // },
        // {
        //   name: '口腔科',
        //   value: 45
        // },
        // {
        //   name: '消化内科',
        //   value: 29
        // }
    ]
})

const roomDiaRef = ref()
let fullscreen = ref(false)

//点击轮播
const onClickRoom = (item) => {
    console.log(item)
    roomDiaRef.value.open(item)
}

const getData = async () => {
    const data = await pclndexRanking({})
    if (data.data.length) {
        let arr = []
        data.data.map((ret) => {
            let obj = {
                name: ret.key,
                value: ret.value,
                sub_unit_id: ret.sub_unit_id,
                number: ret.number
            }
            arr.push(obj)
        })
        hosipital.data = arr
    }
}
const reset = () => {
    hosipital.search = {
        date: [],
        name: '',
        number: ''
    }
    getList(1)
}
const getList = async (page = 1) => {
    if (page === 1) hosipital.pagination.page = 1
    const { data } = await pclndexRankingAll({
        ...hosipital.pagination,
        ...hosipital.search
    })
    hosipital.list = data.data
    hosipital.total = data.total
}
getList()
const changeTime = () => {
    if (hosipital.search.date) {
        hosipital.search.sta_time = hosipital.search.date[0]
        hosipital.search.end_time = hosipital.search.date[1]
    } else {
        hosipital.search.sta_time = ''
        hosipital.search.end_time = ''
    }
}
const onDownExcel = () => {
    pclndexRankingExcl(hosipital.search).then((res) => {
        const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })
        if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
    })
}

onMounted(() => {
    getData()
})
</script>

<style lang="scss" scoped>
.dv-border-box-1 {
    font-size: 14px;

    .title {
        color: #edf4ff;
        height: 20px;
        font-family: 'myFont';
        font-size: 20px;

        img {
            height: 40px;
            margin-top: -4px;
        }
    }
}

.dv-scroll-ranking-board {
    height: 280px;

    :deep(.row-item) {
        cursor: pointer;
    }
}

.testbox {
    width: 100%;

    &::-webkit-scrollbar {
        width: 8px;
        display: none;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #2886f1;
    }

    &::-webkit-scrollbar-track {
        background-color: #4bc7d8;
        border-radius: 4px;
    }
}
</style>
